<div class="row">
    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
        <div class="row flex-items-xs-between flex-items-xs-top" style="padding-left: 15px; padding-right: 15px;">
            <h2 class="header-title">{{'PROJECT.PROJECTS' | translate}}</h2>
            <div>
                <statistics-panel></statistics-panel>
            </div>
        </div>
        <div class="row flex-items-xs-between rightPos">
            <div class="option-right">
                <div class="select" style="float: left; left:-6px; top:8px;">
                    <select (change)="doFilterProjects()" [(ngModel)]="selecteType">
                        <option value="0" [selected]="currentFilteredType === 0">{{projectTypes[0] | translate}}</option>
                        <option value="1">{{projectTypes[1] | translate}}</option>
                        <option value="2">{{projectTypes[2] | translate}}</option>
                    </select>
                </div>
                <hbr-filter [withDivider]="true" filterPlaceholder='{{"PROJECT.FILTER_PLACEHOLDER" | translate}}' (filterEvt)="doSearchProjects($event)" [currentValue]="projectName"></hbr-filter>
                <span class="refresh-btn" (click)="refresh()">
                    <clr-icon shape="refresh"></clr-icon>
                </span>
            </div>
        </div>
        <create-project (create)="createProject($event)"></create-project>
        <list-project (addProject)="openModal()"></list-project>
    </div>
</div>